<template>
    <z-paging
        ref="paging"
        :refresher-out-rate="0.8"
        :to-bottom-loading-more-enabled="false"
        :show-empty-view-reload-when-error="false"
        :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
        empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
        empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
        empty-view-error-text="暂无数据"
        safe-area-inset-bottom
        bg-color="#FFF"
        v-model="dataList"
        @query="queryList"
    >
        <view class="cellBox">
            <!-- 列表 -->
            <view class="news">
                <view
                    class="news_list"
                    v-for="(item, index) in dataList"
                    :key="index"
                    :data-index="index"
                    @touchstart="drawStart"
                    @touchmove="drawMove"
                    @touchend="drawEnd"
                    :style="'right:' + item.right + 'px'"
                >
                    <view
                        class="news_detail flex_wrap row_between"
                        @click="dialogue(item.roomId, item.avatar, item.name)"
                    >
                        <u-avatar :src="item.avatar" size="100rpx"></u-avatar>
                        <view class="infos">
                            <view class="flex_wrap">
                                <u-text
                                    :text="item.name"
                                    size="36rpx"
                                    color="#333"
                                    bold
                                />
                                <u-text
                                    :text="
                                        $u.timeFormat(item.activeTime, 'hh:MM')
                                    "
                                    size="28rpx"
                                    color="#777"
                                    align="right"
                                />
                            </view>
                            <u-gap height="16rpx" />
                            <view class="flex_wrap row_between">
                                <text class="detail_t">{{ item.text }}</text>
                                <text
                                    class="detail_num"
                                    v-if="item.unreadCount"
                                    >{{ item.unreadCount }}</text
                                >
                            </view>
                        </view>
                    </view>
                    <view class="remove" @click="delData(item.roomId)"
                        >删 除</view
                    >
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script>
import { baseUrl } from "@/config/tendIdConfig";
import { getBlogList } from "@/api/consultationSalesman.js";
export default {
    data() {
        return {
            dataList: [],
            //左滑默认宽度
            delBtnWidth: 50,
        };
    },
    onShow() {
        this.$refs.paging.refresh();
    },

    methods: {
        dialogue(roomId, avatar, name) {
            uni.$u.route({
                url: "/pages_my1/dialogue/index",
                params: {
                    roomId: roomId,
                    customerAvatar: avatar,
                    name,
                },
            });
        },
        //删除方法
        delData(roomId) {
            const that = this;
            // console.log("删除");
            uni.showModal({
                title: "提示",
                content: "确认该聊天？",
                success: function (res) {
                    if (res.confirm) {
                        const token =
                            that.$store.getters?.customer_token ||
                            uni.getStorageSync("customer_token");
                        uni.request({
                            url:
                                baseUrl +
                                `/customer/chat_contact/contact/delByRoomId?id=${roomId}`,
                            method: "DELETE",
                            header: {
                                Authorization: token,
                            },
                            success(res) {
                                uni.showToast({
                                    title: res.data.data,
                                    icon: "none",
                                });
                                that.$refs.paging.refresh();
                            },
                        });
                    } else if (res.cancel) {
                    }
                },
            });
        },
        async queryList(pageNum, pageSize) {
            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            uni.request({
                url: baseUrl + "/customer/chat_contact/contact/page",
                method: "GET",
                header: {
                    Authorization: token,
                },
                data: {
                    pageSize,
                },
                success(res) {
                    const result = res.data.data.list ?? [];
                    console.log(result, "result>>>");
                    that.$refs.paging.complete(result);
                },
            });
        },
        //开始触摸滑动
        drawStart(e) {
            // console.log("开始触发");
            var touch = e.touches[0];
            this.startX = touch.clientX;
        },
        //触摸滑动
        drawMove(e) {
            // console.log("滑动");
            for (var index in this.dataList) {
                this.$set(this.dataList[index], "right", 0);
            }
            var touch = e.touches[0];
            var item = this.dataList[e.currentTarget.dataset.index];
            var disX = this.startX - touch.clientX;
            if (disX >= 20) {
                if (disX > this.delBtnWidth) {
                    disX = this.delBtnWidth;
                }
                this.$set(
                    this.dataList[e.currentTarget.dataset.index],
                    "right",
                    disX
                );
            } else {
                this.$set(
                    this.dataList[e.currentTarget.dataset.index],
                    "right",
                    0
                );
            }
        },
        //触摸滑动结束
        drawEnd(e) {
            // console.log("滑动结束", e);
            if (e) {
                var item = this.dataList[e.currentTarget.dataset.index];
                if (item.right >= this.delBtnWidth / 2) {
                    this.$set(
                        this.dataList[e.currentTarget.dataset.index],
                        "right",
                        this.delBtnWidth
                    );
                } else {
                    this.$set(
                        this.dataList[e.currentTarget.dataset.index],
                        "right",
                        0
                    );
                }
            }
        },
    },
};
</script>

<style>
.cellBox {
    padding-left: 32rpx;
}
.infos {
    margin-left: 24rpx;
    padding: 0 32rpx 18rpx 0;
    width: 594rpx;
    border-bottom: 2rpx solid #d8d8d8;
}
.news {
    height: auto;
    overflow: hidden;
}

.news_list {
    display: flex;
    position: relative;
    flex-direction: row;
}

.news_detail {
    padding: 20rpx 0;
    /* height: 140rpx; */
}

.detail_t {
    display: block;
    width: 412rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 28rpx;
    color: #777;
}
.detail_num {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background: #f56c6c;
    text-align: center;
    color: #fff;
    font-size: 28rpx;
}

.remove {
    /* margin-top: 24rpx; */
    margin-left: -5%;
    height: 156rpx;
    width: 100rpx;
    background: #f56c6c;
    color: #ffffff;
    position: absolute;
    top: -20rpx;
    right: -50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}
</style>
